@page
@model NetworkFlowMonitor.Pages.Devices.IndexModel
@{
    ViewData["Title"] = "设备管理";
}

<h2>🔧 设备管理</h2>

<table class="table table-striped">
    <thead>
    <tr>
        <th>ID</th>
        <th>IP 地址</th>
        <th>MAC 地址</th>
        <th>设备名称</th>
        <th>备注</th>
        <th>限速 (kbps)</th>
        <th>黑名单</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    @foreach (var device in Model.Devices)
    {
        <tr>
            <td>@device.Id</td>
            <td><code>@device.IpAddress</code></td>
            <td><code>@device.MacAddress</code></td>
            <td>
                <input type="text" name="deviceName"
                       asp-for="@device.DeviceName" form="updateForm_@device.Id"
                       style="width:120px"/>
            </td>
            <td>
                <input type="text" name="remark"
                       asp-for="@device.Remark"
                       form="updateForm_@device.Id"
                       style="width:160px"
                       placeholder="备注..."/>
            </td>
            <td>
                <input type="number" name="speedLimit"
                       asp-for="@device.SpeedLimitKbps"
                       form="updateForm_@device.Id"
                       min="0"
                       max="100000"
                       style="width:80px"/>
            </td>
            <td>
                <input type="checkbox"
                       name="isBlocked"
                       value="true" form="updateForm_@device.Id"
                       @(device.IsBlocked ? "checked" : "")/>
                <input type="hidden" name="isBlocked" value="false"/>
            </td>
            <td>
                <form id="updateForm_@device.Id" method="post" asp-page-handler="Update" style="display:inline;">
                    <input type="hidden" name="id" value="@device.Id"/>
                    <button type="submit" class="btn btn-sm btn-primary">保存</button>
                </form>
                <a asp-page="./Details" asp-route-id="@device.Id" class="btn btn-sm btn-info">详情</a>
            </td>
        </tr>
    }
    </tbody>
</table>

<style>
    input[type="text"], input[type="number"] {
        padding: 4px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    .table th, .table td {
        vertical-align: middle;
        text-align: center;
    }

    code {
        background: #f0f0f0;
        padding: 2px 6px;
        border-radius: 3px;
        font-family: Consolas, monospace;
    }
</style>